<template>
    <!--关于-->
    <view
        class="upload-box"
        :class="
            showUploadWin === 0 ? 'none' : showUploadWin === 1 ? 'show' : ''
        "
    >
        <view class="upload-content">
            <view class="item-fixed-top">
                <view class="title">{{ title }}</view>
                <view class="close" @click="closeWin">
                    <image
                        src="../../static/images/close.png"
                        mode="aspectFill"
                    ></image>
                </view>
            </view>
            <view class="a-item">
                <view ref="downTpl" class="down-tpl" @click="downGdsTlp"
                    ><text class="d-tpl-txt">{{ downTplTxt }}</text
                    ><text class="d-desc-txt">{{
                        importCustomTitTip
                    }}</text></view
                >
                <view class="txt-content">{{ upDescTxt1 }}</view>
                <view class="txt-content">{{ upDescTxt2 }}</view>
                <view class="txt-content">{{ upDescTxt3 }}</view>
                <view class="txt-content">{{ upDescTxt4 }}</view>
                <view class="txt-content">{{ upDescTxt5 }}</view>
                <view class="txt-content">{{ upDescTxt6 }}</view>

                <view class="txt-content s-c-box" ref="input">
                    <text class="select-fileTxt">{{ uploadTxt }}</text>
                    <text class="file-txt">{{ uploadTipTxt }}</text>
                </view>
            </view>
            <view class="save-box"
                ><text class="s-btn" @click="uploadFile">{{
                    saveTxt
                }}</text></view
            >
        </view>
    </view>
</template>

<script>
import lang from "../../js/conf/Lang.js";
import config from "../../js/conf/Config.js";

import downloadFile from "../../js/upload/DownloadFile.js";

export default {
    data() {
        return {
            showUploadWin: 0,
            title: lang.customerTxt.importCustomTitle,
            downTplTxt: lang.gdsUpAndDownTxt.upTplTxt,
            upDescTxt: lang.gdsUpAndDownTxt.upDescTxt,
            upDescTxt1: lang.customerTxt.importCustomDescTxt1,
            upDescTxt2: lang.customerTxt.importCustomDescTxt2,
            upDescTxt3: lang.customerTxt.importCustomDescTxt3,
            upDescTxt4: lang.customerTxt.importCustomDescTxt4,
            upDescTxt5: lang.customerTxt.importCustomDescTxt5,
            upDescTxt6: lang.customerTxt.importCustomDescTxt6,
            uploadTxt: lang.gdsUpAndDownTxt.uploadTxt,
            uploadTipTxt: lang.gdsUpAndDownTxt.uploadTipTxt,
            saveTxt: lang.saveTxt,

            importCustomTitTip: lang.customerTxt.importCustomTitTip,
            uploadFileSuccessTxt: lang.uploadFileSuccessTxt,

            fileData: null,
            example: 1,
            file: null,
        };
    },
    mounted() {
        this.$nextTick(function () {
            this.chooseFile();
        });
    },

    methods: {
        /**下载产品模板***/
        downGdsTlp() {
            // if(this.showRTBtns)
            // 	downloadFile.downloadCustomTlp();
            // else
            // {
            // 	let url = String(config.host).replace('index.php?/','') + config.CUSTOMER_IMPORT;
            // 	let t = new Date().getTime();
            // 	let fn = lang.customerTxt.customTlpTxt + t + lang.gdsUpAndDownTxt.gdxTlpFileSuffixTxt;
            // 	downloadFile.webDowonloadTlp(url,fn);
            // }
            downloadFile.downloadCustomTlp();
        },

        /***上传编辑好的产品模板***/
        chooseFile() {
            var input = document.createElement("input");
            input.style.width = "100%";
            input.type = "file"; //添加file类型
            // input.multiple = "multiple"; //可以选择多个
            input.accept = ".xlsx"; //限制只能上传PDF文件，可以不限制，能上传任何类型
            input.style.height = "8%";
            input.style.position = "absolute";
            input.style.bottom = "60px";
            input.style.cursor = "pointer";
            input.style.right = "0";
            input.style.opacity = "0";
            input.style.overflow = "hidden"; //防止注意input 元素溢出
            // input.style.backgroundColor = "#FF3333"
            input.id = "file";
            let that = this;
            setTimeout(() => {
                this.$refs.input.$el.appendChild(input); // 这里可能会报$el找不到错误，所以加了延时器，报错的原因是this.$refs.input没有找到为null，所以需要等页面结构加载完后再将其添加进去
                input.onchange = (event) => {
                    // 点击上传选择文件
                    that.file = event.target.files;
                    that.uploadTipTxt = that.file[0].name;
                };
            }, 1000);
        },

        uploadAPI(path) {
            let that = this;
            let param = {};
            param.customer_import = path;
            param.upload = "1";
            let url = config.host + config.CUSTOMER_IMPORT_SAVE;
            console.log("上传图片！！！");
            downloadFile.uploadAPI(param, url, back);

            function back(data) {
                that.closeWin();
                that.file = null;
                that.uploadTipTxt = lang.gdsUpAndDownTxt.uploadTipTxt;
                document.getElementById("file").value = "";
                console.log("data=====:", data);
                if (data.status == 1) {
                    if (!data.data) {
                        that.$msg({ title: lang.errNullTxt, duration: 3000 });
                        return;
                    }
                    data = data.data;
                    let obj = {};
                    obj.title = that.uploadFileSuccessTxt;
                    obj.content =
                        lang.importTxt1 +
                        data.all_num +
                        lang.importTxt2 +
                        data.success_num +
                        lang.importTxt3 +
                        data.error_num +
                        lang.importTxt4;

                    lang.showWin(obj);
                } else {
                    // that.$msg({title:data.msg,duration:3000});
                    let obj = {};
                    obj.title = lang.errTitTxt;
                    obj.content = data.msg;
                    lang.showWin(obj);
                }
            }
            return;
        },

        /****上传文件*****/
        uploadFile() {
            if (this.file) {
                this.uploadAPI(this.file[0]);
            } else {
                this.$msg({ title: "请选择要上传的xlsx文件上传!" });
            }
        },

        /***显示关闭***/
        show(type) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.showUploadWin = 2;
            setTimeout(() => {
                this.showUploadWin = state;
            }, timer);
        },

        /***关闭窗口***/
        closeWin() {
            this.show();
        },
    },
};
</script>
<style lang="scss">
.upload-box {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .upload-content {
        border-radius: 6px;
        overflow: hidden;
        width: 38%;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        .item-fixed-top {
            padding: 10px 0 10px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            font-size: 18px;
            .close {
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
            .close:hover {
                opacity: 0.8;
            }
        }
    }
    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .upload-content {
            transform: translateY(0);
        }
    }
}

.a-item {
    margin: 2px 0;
    background: #fff;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 20px 10px 10px;
    border-bottom: 1px solid #ececec;
    color: #333;
    .down-tpl {
        font-size: 13px;
        .d-tpl-txt {
            color: #3388ff;
            padding: 5px;
            text-decoration: underline;
            cursor: pointer;
        }

        .d-tpl-txt:hover {
            opacity: 0.8;
        }
        .d-desc-txt {
            color: #333;
            padding-left: 15px;
        }
    }

    .txt-content {
        font-size: 13px;
    }
    .s-c-box {
        margin-top: 5px;
        padding-top: 20px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 10px;
        border-top: 1px solid #ececec;
        // margin-bottom: 5px;
        // border-bottom: 1px solid #ECECEC;
        cursor: pointer;
        .select-fileTxt {
            margin-left: 10px;
            padding: 6px;
            background-color: #3388ff;
            border-radius: 4px;
            color: #fff;
        }
        .file-txt {
            padding-left: 10px;
            color: #999;
        }
    }
    .s-c-box:hover {
        opacity: 0.8;
    }
}

.save-box {
    width: 100%;
    text-align: center;
    .s-btn {
        height: 30px;
        text-align: center;
        line-height: 40px;
        padding: 10px 30px;
        background-color: #3388ff;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
    }
    .s-btn:hover {
        opacity: 0.8;
    }
}
</style>